import './index.scss'
import {Drawer, Flex, Image} from "antd";
import {DeleteOutlined} from '@ant-design/icons'
import CountBtn from "@/components/CountBtn/index.jsx";
import {useStore} from "@/store/index.jsx";
import {useEffect, useState} from "react";
import {autorun} from "mobx";

const MyDrawer = (props) => {
    const {listStore} = useStore()
    const [open, setOpen] = useState(false);

    useEffect(() => {
        autorun(() => {
            setOpen(props.open)
        })
    }, [props.open])

const handleClear=()=>{
    onClose()
        listStore.delShoppingCar()
}
    const showDrawer = () => {
        setOpen(true);
    };

    const onClose = () => {
        setOpen(false);
    };
    return (<div className={'drawer'}>

        <Drawer
            onClose={onClose}
            extra={<div className={'clear'} onClick={handleClear}><DeleteOutlined/> 清空购物车</div>}
            closeIcon={null}

            title="购物车"
            placement={'bottom'}
            open={open}>
            <div className={'list'}>
                {listStore.carList.map(v =>
                    <Flex key={v.id} vertical={false} style={{width: '100%',marginBottom:'20px'}}>
                        <Image
                            fallback=""
                            width={60}
                            height={60}
                            src={v.picture}
                        />
                        <div className={'right'}>
                            <div className={'name'}>{v.name}</div>

                            <div className={'price-row'}>
                                <div className={'price'}><span style={{fontSize: '12px'}}>¥ </span>
                                    <span>{v.price}</span></div>
                                <CountBtn onDrawerClose={onClose} row={v}></CountBtn>
                            </div>
                        </div>
                    </Flex>)}
            </div>

        </Drawer>
    </div>)
}
export default MyDrawer

